import React, { forwardRef, useState } from 'react'
import PropTypes from 'prop-types'
import { Popup, DatePicker } from 'zarm'
// 转换时间
import dayjs from 'dayjs'


// forwardRef ，用来声明当前组件可以被获取.
// 注意它的写法，要将整个箭头函数包起来
const PopupDate = forwardRef(({ onSelect, mode = 'date' }, ref) => {  //在子组件内接收一个 ref 标记，然后再在下面使用
  const [show, setShow] = useState(false)
  const [now, setNow] = useState(new Date())

  const choseMonth = (item) => {
    setNow(item)
    setShow(false)
    if (mode == 'month') {
      onSelect(dayjs(item).format('YYYY-MM'))
    } else if (mode == 'date') {
      console.log('这是啥',dayjs(item));
      onSelect(dayjs(item).format('YYYY-MM-DD'))
      console.log('2222',dayjs(item).format('YYYY-MM-DD'));
      // onSelect(dayjs(item))
    }
  }

  if (ref) {
    ref.current = {
      show: () => {
        setShow(true)
      },
      close: () => {
        setShow(false)
      }
    }
  };
  return <Popup
    visible={show}
    direction="bottom"
    onMaskClick={() => setShow(false)}
    destroy={false}
    mountContainer={() => document.body}
  >
    <div>
      <DatePicker
        visible={show}
        value={now}
        mode={mode}
        onOk={choseMonth}
        onCancel={() => setShow(false)}
      />
    </div>
  </Popup>
});

PopupDate.propTypes = {
  mode: PropTypes.string, // 日期模式
  onSelect: PropTypes.func, // 选择后的回调
}

export default PopupDate;
